<template>
    <div>
        <div class="front-notice"><i class="el-icon-bell" style="margin-right: 2px"></i>公告：{{ top }}</div>
        <!--头部-->
        <div class="front-header">
            <div class="front-header-left">
                <img src="@/assets/imgs/logo.png" alt="">
                <div class="title">项目前台</div>
            </div>
            <div class="front-header-center">
                <div class="front-header-nav">
                    <el-menu :default-active="$route.path" mode="horizontal" router>
                        <el-menu-item index="/front/home">首页</el-menu-item>
                        <el-menu-item index="/front/person">个人中心</el-menu-item>
                    </el-menu>
                </div>
            </div>
            <div class="front-header-right">
                <div v-if="!user.nickname">
                    <el-button @click="$router.push('/login')">登录</el-button>
                    <el-button @click="$router.push('/register')">注册</el-button>
                </div>
                <div v-else>
                    <el-dropdown>
                        <div class="front-header-dropdown">
                            <img :src="user.avatarUrl" alt="">
                            <div style="margin-left: 10px">
                                <span>{{ user.nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
                            </div>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <div style="text-decoration: none" @click="logout">退出</div>
                                <div style="text-decoration: none" @click="toAdmin">跳转后台</div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <!--主体-->
        <div class="main-body">
            <router-view ref="child" @update:user="updateUser" />
        </div>
    </div>

</template>

<script>
    export default {
        name: "FrontLayout",

        data () {
            return {
                top: '',
                notice: [],
                user: JSON.parse(localStorage.getItem("user") || '{}'),
            }
        },

        mounted() {
            this.loadNotice()
        },
        methods: {
            loadNotice() {
                this.request.get('/notice/findAll').then(res => {
                    this.notice = res.data
                    let i = 0
                    if (this.notice && this.notice.length) {
                        this.top = this.notice[0].content
                        setInterval(() => {
                            this.top = this.notice[i].content
                            i++
                            if (i === this.notice.length) {
                                i = 0
                            }
                        }, 2500)
                    }
                })
            },
            updateUser() {
                this.user = JSON.parse(localStorage.getItem('user') || '{}')   // 重新获取下用户的最新信息
            },
            // 退出登录
            logout() {
                localStorage.removeItem("user");
                this.$router.push("/login");
            },
            //跳转后台
            toAdmin() {
                this.$router.push("/home");
            },
        }

    }
</script>

<style>
    .front-notice {
        padding: 5px 20px;
        color: #666;
        font-size: 12px
    }
    .front-header {
        display: flex;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #eee;
        background: white;
    }
    .front-header-left {
        width: 350px;
        display: flex;
        align-items: center;
        padding-left: 30px;
    }
    .front-header-left img, .front-header-dropdown img {
        width: 40px;
        height: 40px;
        border-radius: 50%
    }
    .front-header-left .title {
        flex: 1;
        color: #355476;
        cursor: pointer;
        margin-left: 10px;
        font-size: 20px;
        font-weight: bold;
    }
    .front-header-center {
        flex: 1;
    }
    .front-header-right {
        width: 200px;
        padding-right: 20px;
        text-align: right;
    }
    .front-header-dropdown {
        display: flex;
        align-items: center;
        justify-content: right;
    }
    .el-dropdown-menu {
        width: 100px !important;
        text-align: center !important;
    }

    /*页面具体样式自定义*/
    .main-content {
        width: 100%;
        margin: 5px auto;
    }
    /* ElementUI 样式覆盖 */
    .el-menu.el-menu--horizontal {
        border: none !important;
        height: 59px;
    }
</style>